<template>
  <div class="container" style="height: 100%">
    <a-tabs v-model:activeKey="activeKey" @change="changeTab">
      <a-tab-pane key="1" tab="Tab 1"></a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2">1</a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">1</a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
  import { onMounted, ref, watch } from 'vue';
  import { configApi } from '/@/api/support/config-api';

  let setMap = {
    1: 'basic_setting',
  };

  const activeKey = ref();

  const setting = ref();

  watch(
    () => activeKey.value,
    (newVal) => {
      console.log(setMap[newVal]);
      configApi.queryByKey(setMap[newVal]).then((res) => {
        setting.value = res.data.configValue;
      });
      console.log(newVal);
    }
  );

  function changeTab(e) {
    activeKey.value = e;
  }

  onMounted(() => {
    activeKey.value = '1';
  });
</script>

<style scoped lang="less"></style>
